<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>

<title>员工列表</title>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 
	不以/开始的的相对路径，找资源，以当前资源的路径为基准，容易出问题
	以/开始的相对路径，找资源，以服务器路径为基准。需要加上项目名
	
	//上面的%内部 以斜线开始 所以用的时候 不加斜线
-->
<script type="text/javascript"
	src="${APP_PATH }/static/js/jquery-1.11.0.min.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link
	href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 员工修改的模态框 -->


<div class="modal fade" id="empupdateModal" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" >员工修改 </h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="from">
						<div class="form-group">
							<label class="col-sm-2 control-label">EmpName</label>
							<div class="col-sm-10">
							 <p class="form-control-static" id="empName_update_static" ></p>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">email</label>
							<div class="col-sm-10">
								<input type="text" name="email" class="form-control" id="email_update_input"
									placeholder="邮箱">
								<span  class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">gender</label>
							<div class="col-sm-10">
								<label class="radio-inline"> <input type="radio"
									name="gender" id="gender1_update_input" value="男" checked="checked">
									男
								</label> <label class="radio-inline"> <input type="radio"
									name="gender" id="gender1_update_input" value="女">
									女
								</label>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">deptName</label>
							<div class="col-sm-4">
							<!-- 部门提交直接是部门id -->
								<select class="form-control" name="dId"  >
								</select>
								</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="emp_update_btn" >更新</button>
				</div>
			</div>
		</div>
	</div>







<!-- 员工添加的模态框 -->
	<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">员工添加</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="from">
						<div class="form-group">
							<label class="col-sm-2 control-label">EmpName</label>
							<div class="col-sm-10">
								<input type="text" name="EmpName" class="form-control" id="empName_add_input"
									placeholder="员工姓名">
								<span  class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">email</label>
							<div class="col-sm-10">
								<input type="text" name="email" class="form-control" id="email_add_input"
									placeholder="邮箱">
								<span  class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">gender</label>
							<div class="col-sm-10">
								<label class="radio-inline"> <input type="radio"
									name="gender" id="gender1_add_input" value="男" checked="checked">
									男
								</label> <label class="radio-inline"> <input type="radio"
									name="gender" id="gender1_add_input" value="女">
									女
								</label>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">deptName</label>
							<div class="col-sm-4">
							<!-- 部门提交直接是部门id -->
								<select class="form-control" name="dId" id="depts_form">
								</select>
								</div>
						</div>

					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="emp_save_btn" >保存</button>
				</div>
			</div>
		</div>
	</div>


<!-- json显示页面 -->
<div class="container">
	<!-- 标题 -->
	<div class="row">
		<div class="col-md-12" role="main">
			<h1>SSM-CRUD</h1>
		</div>
	</div>
	<!-- 两个按钮  因为是右边显示所以使用列偏移-->
	<div class="row">

		<div class="col-md-2 col-md-offset-10">
			<button type="button" class="btn btn-primary" id="emp_add_model_but">增加</button>
			<button type="button" class="btn btn-info">删除</button>
		</div>
	</div>
	<br>
	<!-- 显示数据 -->
	<div class="row">
		<div class="col-md-12 ">
			<table class="table table-hover" id="emps_table">
				<thead>
					<tr>
						<th>#</th>
						<th>LastName</th>
						<th>Email</th>
						<th>gender</th>
						<th>DeptName</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6" id="page_numinfo"></div>
		<!-- 显示页数指数 -->
		<div class="col-md-6" id="nums_info"></div>
	</div>
</div>
<script type="text/javascript">
var totalMax;
	//1页面加载完成之后，直接发送ajax技术，要到分页数据
	$(function() {
		//页面跳转之间的跳转
		to_page(1);
	});

	//页面跳转方法
	function to_page(pn) {
		$.ajax({
			url : "${APP_PATH}/emps",
			data : "pn=" + pn,
			type : "GET",
			success : function(result) {
				//console.log(result);请求成功之后
				//1解析并显示员工数据
				build_emps_table(result);
				//2解析并显示分页信息
				build_pages_info(result);
				//3解析并显示页码信息
				build_nums_info(result);
			}
		});
		/*1解析并显示员工数据的方法
		{"code":100,"msg":"处理成功","extend":
		{"pageInfo":{"pageNum":1,"pageSize":10,}
		"size":10,"startRow":1,"endRow":10,"total":1000,"pages":100,"list":
		[{"empId":1,"empName":"738c01","gender":"女","email":"738c01@qq.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},
			{"empId":2,"empName":"ed6e62","gender":"女","email":"ed6e62@qq.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},
			{"empId":3,"empName":"f77f83","gender":"女","email":"f77f83@qq.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}}
		}
		 */
		function build_emps_table(result) {
			//先清空数据
			$("#emps_table tbody").empty();
			//解析jsp数据
			var emps = result.extend.pageInfo.list;

			$.each(emps, function(index, item) {
				var empidTd = $("<td></td>").append(item.empId);
				var empNameTd = $("<td></td>").append(item.empName);
				var empEmailTd = $("<td></td>").append(item.email);
				var empGenderTd = $("<td></td").append(item.gender);
				var empdeptNameTd = $("<td></td>").append(
						item.department.deptName);
				//两个按钮
				/*
				 *<button type="button" class="btn btn-warning btn-sm">
					<span class="glyphicon glyphicon-edit " aria-hidden="true" ></span>
						编辑</button>
				<button type="button" class="btn btn-info btn-sm">
				<span class="glyphicon glyphicon-remove-sign " aria-hidden="true"></span>
						删除</button>
				 */
				var editbtn = $("<button></button>").addClass(
						"btn btn-warning btn-sm edit_btn").append($("<span></span>"))
						.addClass("glyphicon glyphicon-edit").append("编辑");
				//为编辑按钮添加自定的属性表示当前员工的id
				editbtn.attr("edit-id",item.empId);
				var deltebtn = $("<button></button>").addClass(
						"btn btn-info btn-sm delete_btn").append($("<span></span>"))
						.addClass("glyphicon glyphicon-remove-sign").append(
								"删除");
				//拆分成两个单元格
				var btnIT = $("<td></td>").append(editbtn).append(" ").append(
						deltebtn);
				//append方法执行完成以后还是返回原来的元素
				$("<tr></tr>").append(empidTd).append(empNameTd).append(
						empEmailTd).append(empGenderTd).append(empdeptNameTd)
						.append(btnIT).appendTo("#emps_table tbody")

			});
		}
		/*
		//2解析并显示分页信息 直接加文本
		
		{"code":100,"msg":"处理成功","extend":{"pageInfo":
		{"pageNum":5,"pageSize":10,"size":10,"startRow":41,"endRow":50,"total":1000,"pages":100,"list":
		}数据
		"prePage":4,"nextPage":6,"isFirstPage":false,"isLastPage":
		false,"hasPreviousPage":true,"hasNextPage":true,
		"navigatePages":5,"navigatepageNums":[3,4,5,6,7],
		"navigateFirstPage":3,"navigateLastPage":7,"firstPage":3,"lastPage":7}}}
		 */
		function build_pages_info(result) {
			//情空数据
			$("#page_numinfo").empty();
			var info = result.extend.pageInfo;
			//var br=append($("<br></br>"))
			$("#page_numinfo").append(
					"当前的页数" + info.pageNum + "记录条数"
							+ result.extend.pageInfo.size + "总页数"
							+ result.extend.pageInfo.pages + "总记录数"
							+ result.extend.pageInfo.total);
			totalMax=result.extend.pageInfo.total;
		}
		//解析并显示页码信息的方法 
		/**
		,"prePage":99,"nextPage":101,"isFirstPage":false,"isLastPage":false,
		"hasPreviousPage":true,"hasNextPage":true,"navigatePages":5,"
		navigatepageNums":[98,99,100,101,102],
		"navigateFirstPage":98,"navigateLastPage":102,"firstPage":98,"lastPage":102}}}
		 */
		function build_nums_info(result) {
			//清空数据
			$("#nums_info").empty();
			//nums_info
			var ul = $("<ul></ul>").addClass("pagination");
			var num = result.extend.pageInfo;
			var first = $("<li></li>").append(
					$("<a></a>").append("首页").attr("href", "#"));
			var up = $("<li></li>").append($("<a></a>").append("&laquo;"));
			//禁用掉首页和上一页按钮
			if (num.isFirstPage == true) {
				first.addClass("disabled");
				up.addClass("disabled");
			} else {
				//上一页的跳转
				up.click(function() {
					to_page(num.prePage);
				});
				//首页跳转的实现
				first.click(function() {
					to_page(1);
				});
			}
			var next = $("<li></li>").append($("<a></a>").append("&raquo;"));
			var last = $("<li></li>").append(
					$("<a></a>").append("尾页").attr("href", "#"));
			//禁用掉尾页和下一页的内容
			if (num.isLastPage == true) {
				next.addClass("disabled");
				last.addClass("disabled");
			} else {
				//下一页的跳转
				next.click(function() {
					to_page(num.nextPage);
				});
				//尾页的跳转
				last.click(function() {
					to_page(num.pages);
				});
			}

			//页面结构显示
			ul.append(first).append(up);
			$.each(num.navigatepageNums, function(index, item) {
				var numli = $("<li></li>").append($("<a></a>").append(item));
				if (num.pageNum == item) {
					numli.addClass("active");
				}
				//页面之间跳转的实现
				numli.click(function() {
					to_page(item);
				});

				ul.append(numli);
			});
			ul.append(next).append(last);
			//ul添加添加到页面 
			var nav = $("<nav></nav>").append(ul);
			nav.appendTo("#nums_info");
		}
	}
	//清除表单旧东西的方法
	function reset_from(ele){
		//清空表单内容
		$(ele)[0].reset();
		//情况表单样式
		$(ele).removeClass("has-error has-success");
		$(ele).find(".help-block").text("");
	}
	//点击新增按钮 弹出模态框
	$("#emp_add_model_but").click(function() {
		//清楚表单数据
		reset_from("#from");
		//$("#from")[0].reset()
		//发送ajax请求，查出部门信息，显示在下拉列表
		getDepts("#depts_form");
		//弹出模态框
		$("#empAddModal").modal({
			backdrop : "static"
		});
	});
	//下拉列表的实现方法,查出部门信息
	function getDepts(ele){
		$(ele).empty();
		$.ajax({
			//向服务器要部门信息
			url:"${APP_PATH}/depts",
			type:"GET",
			success:function(result){
				//alert(result)
				/*显示部门信息在下拉列表中
				code":100,"msg":"处理成功","extend":{
					"depts":[{"deptId":1,"deptName":"开发部"},
						{"deptId":2,"deptName":"测试部"},{"deptId":3,"deptName":"公关部"}]}}*/
				//遍历部门信息
				var bumen=result.extend.depts;
				$.each(bumen,function(){
					var optionEle=$("<option ></option>").append(this.deptName).attr("value",this.deptId);
					optionEle.appendTo(ele);
				});
			}
		});
	}
	//jquery校验表单数据
	function vaildata_add_from(){
		//使用正则表达式
		var empname= $("#empName_add_input").val();
		var regName=/(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2-5})/;
		if(!regName.test(empname)){
			show_vaildate_msg("#empName_add_input","error","2-5汉字或者6-16位中英文");
			return false;
		}else{
			show_vaildate_msg("#empName_add_input","success");
			/*  $("#empName_add_input").parent().addClass("has-success"); */
		}
		//校验邮箱信息
		var email=$("#email_add_input").val();
		var regemail=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		if(!regemail.test(email)){
			show_vaildate_msg("#email_add_input","error","非法邮箱");
			 /* $("#email_add_input").parent().addClass("has-error");
			 $("#email_add_input").next("span").text("非法邮箱"); */
			return false;
		}else{
			show_vaildate_msg("#email_add_input","success","");
		}
		return true;
			
	}
	
	//提示信息
	function show_vaildate_msg(ele,status,msg){
		//清除当前元素校验状态
		 $(ele).parent().removeClass("has-success has-error");
		 $(ele).next("span").text();
		if("success"==status){
			 $(ele).parent().addClass("has-success");
			 $(ele).next("span").text(msg);
		}else if("error"==status){
			 $(ele).parent().addClass("has-error");
			 $(ele).next("span").text(msg);  
		}
	}
	//绑定单击 员工保存的按钮事件v 
	$("#emp_save_btn").click(function(){
		if(!vaildata_add_from()){
			return false;
		}
		//判断之前的用户名校验是否成功
		if($(this).attr("ajax-va")=="error"){
			return false;
			
		}
		//1模态框中填写的数据保存到
		//发送ajax请求保存员工
		//$("#depts_form").serialize();
		  $.ajax({
			url:"${APP_PATH}/emp",
			type:"POST",
			//表格序列化的数据
			data:$("#empAddModal form").serialize(),
			success:function(result){
				if(result.code==100){
				//alert(result.msg)
				//员工保存成功，要关闭模态框，并且来到最后一页，把这个数据给数据库
				$('#empAddModal').modal('hide')
				//发送ajax请求显示最后一页的数据 
				to_page(totalMax);
				}else{  
					//有那个字段的错误信息  绕过了前端校验
					if(undefined!=result.extend.errorFields.email){
						//显示有限的错误信息
						show_vaildate_msg("#email_add_input","error",result.extend.errorFields.email);
					}
					if(undefined!=result.extend.errorFields.empName){
						//显示员工的错误信息
						show_vaildate_msg("#empName_add_input","error",result.extend.errorFields.empName);
					}
				}
			} 
		}); 
	});
	//ajax校验
	$("#empName_add_input").change(function(){
		//1进入控制器编写方法进行校验。
		var empName=this.value;
		$.ajax({
			url:"${APP_PATH}/checkuser",
			data:"empName="+empName,
			type:"POST",
			success:function(result){
				if(result.code==100){
					show_vaildate_msg("#empName_add_input","success","用户名可用");
					$("#emp_save_btn").attr("ajax-va","success");
				}else{
					show_vaildate_msg("#empName_add_input","error",result.extend.va_msg);
					$("#emp_save_btn").attr("ajax-va","error"); 
				}
			}
		});
	});
	/**
	修改页面的代码
	点击编辑
	弹出用户修改的模态框（显示用户信息
	点击更新，完成用户的xiug
	*/
	//绑定编辑按钮 因为我们创建之前就绑定了ckick  所以绑定不上 
	//1可以在创建的时候进行绑定2绑定live，也可以为后来的元素绑定，但是新版本的jquery直接给删除了 需要用on方法替代。
	$(document).on("click",".edit_btn",function(){
		//alert("eddddddd")
		//1查出部门信息 
		getDepts("#empupdateModal select");
		//当查出所有部门信息之后，在显示每个员工的部门
		//2查出员工信息，
		getEMp($(this).attr("edit-id"));
		//3把员工id传递给更新按钮
		$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
		//弹出模态框
		$("#empupdateModal").modal({
			backdrop : "static",
		});
		
	});
	//查出员工信息的方法
	function getEMp(id){
		$.ajax({
			url:"${APP_PATH}/emp/"+id,
			type:"GET",
			success:function(result){
				//显示{"code":100,"msg":"处理成功","extend":{"em":{"empId":3,
				//"empName":"d7a4a3","gender":"女","email":"d7a4a3@qq.com","dId":2,"department":null}}}
				//1 显示员工信息 并显示部门列表 等信息
				var empdate=result.extend.em;
				$("#empName_update_static").text(empdate.empName);
				$("#email_update_input").val(empdate.email);
				//单元框和下拉列表的选择用数组
				$("#empupdateModal input[name=gender]").val([empdate.gender]);
				$("#empupdateModal select").val([empdate.dId]);
			}
		});
	}
	//查出更新之后的保存
	$("#emp_update_btn").click(function(){
		//验证邮箱是否和法
		//1校验邮箱信息
		var email=$("#email_update_input").val();
		var regemail=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		if(!regemail.test(email)){
			show_vaildate_msg("#email_add_input","error","非法邮箱");
			 /* $("#email_add_input").parent().addClass("has-error");
			 $("#email_add_input").next("span").text("非法邮箱"); */
			return false;
		}else{
			show_vaildate_msg("#email_add_input","success","");
		}
		//2发送ajax请求保存更新的请求
		$.ajax({
			url:"${APP_PATH}/emp/"+$("#emp_update_btn").attr("edit-id"),
			type:"POST",
			data:$("empupdateModal from").serialize()+"&_method=PUT",
			success:function(result){
				alert(result.msg)
			}
			
			
		});
	});
	
	
</script>
</body>
</html>
